<template>
    <div>
      <Card>
     <div class="header">
        <div class="hoz"><h3>考试信息:</h3><h3 v-for="(item, index) in this.studentMsg.examPageInfo" :key="index" >{{item+'/'}}</h3></div>
        <div class='pos'> <div id="score" :style="{width:'150px',height:'150px'}"></div></div> 
         </div></Card>
      <br/>
      <div class="container">
         <div id="myChart" :style="{width:'600px',height:'300px'}"></div>
          <div id="main" :style="{width:'600px',height:'300px'}"></div>
      </div>
        
    </div>
</template>
<script>
export default {
  beforeMount() {
    this.studentMsg = this.$route.query.Msg;
    this.studentName = this.$route.query.studentName;
  },
  mounted() {
    this.data1.push(this.studentMsg.sum1);
    this.data1.push(this.studentMsg.sum2);
    var pie1 = { value: this.studentMsg.sum1, name: "单选题" };
    var pie2 = { value: this.studentMsg.sum2, name: "多选题" };
    this.data2.push(pie1);
    this.data2.push(pie2);
    this.drawChart();
    this.ScoreChart(this.studentMsg.scare)
  },
  data() {
    return {
      studentMsg: "",
      studentName: "",
      data1: [],
      data2: []
    };
  },
  methods: {
    drawChart() {
      let mybar = this.$echarts.init(document.getElementById("myChart"));
      let option1 = {
        title: { text: "矩形图成绩分析" },
        tooltip: {},
        legend: { data: ["成绩"] },
        xAxis: { data: ["单选题", "多选题"] },
        yAxis: {},
        series: [
          {
            name: "成绩",
            type: "bar",
            data: this.data1
          }
        ]
      };
      mybar.setOption(option1);

      let mypie = this.$echarts.init(document.getElementById("main"));
      let option2 = {
        title: {
          text: "饼状图成绩分析",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["单选题", "多选题"]
        },
        series: [
          {
            name: "成绩分析",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data2
          }
        ]
      };
      mypie.setOption(option2);
    },
    ScoreChart(a) {
      let value = a;
      let that = this;
      let mybar = this.$echarts.init(document.getElementById("score"));
      let option1 = {
        backgroundColor: "",
        title: {
          text: `${value}分`,
          subtext: "考试成绩",
          left: "center",
          top: "center", //top待调整
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontFamily: "DINAlternate-Bold"
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 10,
            fontFamily: "PingFangSC-Regular",
            top: "center"
          },
          itemGap: -4 //主副标题间距
        },
        xAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
          // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          // 内圆
          {
            type: "pie",
            radius: ["0", "50%"],
            center: ["50%", "50%"],
            z: 0,
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#000"
                  },
                  {
                    offset: 0.5,
                    color: "#000"
                  },
                  {
                    offset: 0.8,
                    color: "#000"
                  }
                ]),
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            label: {
              normal: {
                position: "center"
              }
            },
            data: [100]
          },
          // 进度圈
          {
            type: "pie",
            clockWise: true,
            radius: ["60%", "55%"],
            data: [
              {
                value: value,
                itemStyle: {
                  normal: {
                    borderWidth: 10,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#46A3FF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#0072E3" // 100% 处的颜色
                        }
                      ]
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#46A3FF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#005AB5" // 100% 处的颜色
                        }
                      ]
                    },
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              },
              {
                name: "gap",
                value: 100 - value,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "rgba(0, 0, 0, 0.2)",
                    borderColor: "rgba(0, 0, 0, 0.2)",
                    borderWidth: 0
                  }
                }
              }
            ]
          },
          //刻度尺
          {
            // name: "白色圈刻度",
            type: "gauge",
            radius: "67%",
            startAngle: 225, //刻度起始
            endAngle: -134.8, //刻度结束
            z: 4,
            axisTick: {
              show: true,
              lineStyle: {
                width: 2,
                color: "rgba(0,0,0, 0.2)"
              }
            },
            splitLine: {
              length: 12, //刻度节点线长度
              lineStyle: {
                width: 1,
                color: "rgba(0,0,0, 0.2)"
              } //刻度节点线
            },
            axisLabel: {
              color: "rgba(0,0,0,0.2)",
              fontSize: 10
            }, //刻度节点文字颜色
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 0,
                name: ""
              }
            ]
          },
          // 刻度圈
          {
            type: "pie",
            radius: ["0%", "73%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontWeight: "bold"
                }
              }
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.05,
                      color: "rgba(0,0,0, 0.2)"
                    },
                    {
                      offset: 0.5,
                      color: "rgba(0,0,0,0.2)"
                    },
                    {
                      offset: 0.95,
                      color: "rgba(0,0,0, 0.2)"
                    }
                  ]
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 3235
              }
            ]
          },
          //最外层圈
          {
            type: "pie",
            radius: ["0%", "85%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontWeight: "bold"
                }
              }
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.05,
                      color: "rgba(0,0,0, 0.05)"
                    },
                    {
                      offset: 0.6,
                      color: "rgba(0,0,0, 0.05)"
                    },
                    {
                      offset: 0.95,
                      color: "rgba(0,0,0, 0.05)"
                    }
                  ]
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 3235
              }
            ]
          }
        ]
      };
      mybar.setOption(option1);
    }
      
  }
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  padding: 30px;
}

.container {
  margin-top: 120px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 800px;
}
.hoz {
  display: flex;
  flex-direction: row;
}
.pos{
  position: absolute;
  top: 8px;
  right: 30px;
}

</style>